<template>
	<view class='person_box'>
		<view class="header">
			<image src="../../../static/zuo.png" mode="" style="width: 45upx;height: 45upx;" @click="back"></image>
			<text style="font-size: 40upx;margin-left: 30%;">视频列表</text>
		</view>
		<view class="works">
			<scroll-view scroll-y="" class="works_center" @scrolltolower='bottomScroll'>
				<view class="works_box">
					<view v-for="(item,index) in works" :index="index" class="mo"
						@longtap.stop.prevent="touchstart(index,item.id)">
						<view class='item' @click="navPlayer(item.shop_id,index)">
							<image :src='item.cover_img'></image>
						</view>
						<text v-if="item.status==1" style="font-size: 24upx;color: #333;">已审核</text>
						<text v-else style="font-size: 24upx;color: #FF3D3D;">审核未通过</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="foot">
			<view class="btn" @click="fbsp">
				发布视频
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				works: [],
				shopId: '',
				userinfo:{}
			}
		},
		// components:{
		// 	avatar,
		// 	worksItem,
		// 	complanit
		// },
		onLoad(option) {
			try {
				const value = uni.getStorageSync('userInfo');
				if (value) {
					
					this.userInfo = JSON.parse(value)
					console.log(this.userInfo,"视频信息")
				}
			} catch (e) {
				// error
			}
			uni.request({
				url: 'https://dsx.cdzer.com//merchants/Video/videolist', //仅为示例，并非真实接口地址。
				data: {
					shop_id: this.userInfo.shop_id
				},
				header: {
					'content-type': 'application/x-www-form-urlencoded',
				},
				method: 'POST',
				success: (res) => {
					console.log(res, "视频列表")
					this.works = res.data.data
				}
			});
		},
		onShow() {
			uni.request({
				url: 'https://dsx.cdzer.com//merchants/Video/videolist', //仅为示例，并非真实接口地址。
				data: {
					shop_id: this.userInfo.shop_id
				},
				header: {
					'content-type': 'application/x-www-form-urlencoded',
				},
				method: 'POST',
				success: (res) => {
					console.log(res, "视频列表")
					this.works = res.data.data
				}
			});
		},
		methods: {
			back(){
				uni.switchTab({
					url:'/pages/tabBar/my'
				})
			},
			touchstart(index, id) {
				let that = this
				this.Loop = setTimeout(function() {
					uni.showModal({
						title: '删除',
						content: '请问要删除本条视频吗?',
						success: function(res) {
							if (res.confirm) {
								// that.delzz(that.idlist)
								that.del(id)
							} else if (res.cancel) {
								console.log('用户点击取消');
							}

						}
					});
				}.bind(this), 100);

			},
			del(id) {
				uni.request({
					url: 'https://dsx.cdzer.com/merchants/Video/delete', //仅为示例，并非真实接口地址。
					data: {
						id: id
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					method: 'POST',
					success: (res) => {
						console.log(res, "视频列表")
						// this.works = res.data.data
						if (res.data.status == 1) {
							uni.showToast({
								title: res.data.mess
							})
							setTimeout(() => {
								uni.request({
									url:'https://dsx.cdzer.com//merchants/Video/videolist', //仅为示例，并非真实接口地址。
									data: {
										shop_id: this.userInfo.shop_id
									},
									header: {
										'content-type': 'application/x-www-form-urlencoded',
									},
									method: 'POST',
									success: (res) => {
										console.log(res, "视频列表")
										this.works = res.data.data
									}
								});
							}, 500)
						} else {
							uni.showToast({
								title: res.data.mess,
								icon: 'none'
							})
						}
					}
				});
			},
			touchend() {
				console.log('结束')
				clearInterval(this.Loop);
			},
			navPlayer(id, index) {
				uni.navigateTo({
					url: `./shopPlyer?shopId=${id}&index=${index}&page=${1}`
				})
			},
			fbsp() {
				uni.navigateTo({
					url: './fabu'
				})
			},
		}
	}
</script>

<style lang='less' scoped>
	.header{
		position: fixed;
		background-color: #fff;
		height: 110upx;
		width: 100%;
		top: 0;
		left: 0;
		display: flex;
		z-index: 100;
		align-items: center;
		padding-left: 30upx;
	}
	.foot {
		width: 100%;
		height: 100upx;
		background-color: #FFFFFF;
		padding-top: 10upx;
		position: fixed;
		bottom: 0;

		.btn {
			width: 690upx;
			height: 80upx;
			margin: 0 auto;
			/* margin-top: 10upx; */
			line-height: 80upx;
			color: #FFFFFF;
			background: linear-gradient(90deg, #FF5C5C, #FF3D3D);
			border-radius: 10upx;
			text-align: center;
		}
	}

	.mo {
		background-color: #FFFFFF;
		height: 360upx;
		display: flex;
		margin-top: 20upx;
		width: 28.5%;
		flex-direction: column;
		margin-left: 30upx;
	}


	.across {
		display: flex;
	}

	.vertical {
		display: flex;
		flex-direction: column;
	}

	.person_box {
		margin-top: 20upx;
		background-color: #F5F5F5;
		width: 100vw;
		height: 100vh;
		overflow: scroll;

		.person_top {
			align-items: center;
			width: 94vw;
			justify-content: space-between;
			padding: 20rpx 0;
			margin: 0 3vw;
			color: #fff;
		}

		.person_top {
			.avatar_box {
				position: relative;

				view {
					font-size: 36rpx;
				}

				.shop_name {
					position: absolute;
					bottom: -38rpx;
					white-space: nowrap;
				}
			}

			.follow {
				width: 58vw;
				height: 74rpx;
				background-color: #ff3d3d;
				border-radius: 10rpx;
				text-align: center;
				line-height: 74rpx;
			}

			.more_btn {
				width: 74rpx;
				height: 74rpx;
				background-color: #242730;
				border-radius: 10rpx;

				image {
					margin-left: 15rpx;
					margin-top: 33rpx;
					width: 44rpx;
					height: 8rpx;
				}
			}
		}

		.person_center {
			margin: 40rpx 3vw;
			width: 94vw;
			height: 340rpx;

			.info_box {
				height: 88rpx;
				width: 94vw;
				color: #fff;
				padding: 0 15rpx;
				background-color: #242730;
				border-radius: 10rpx;
				justify-content: space-between;
				align-items: center;

				view {
					width: 60%;
					overflow: hidden;
					white-space: nowrap;
					line-height: 88rpx;
					text-overflow: ellipsis;
					font-size: 30rpx;
				}

				image {
					width: 34rpx;
					height: 34rpx;
				}

				.handle {
					width: 20vw;
					justify-content: space-around;
				}
			}

			.desc_box {
				width: 94vw;
				font-size: 30rpx;
				color: #ffffff;
				margin-top: 40rpx;
				line-height: 50rpx;
				letter-spacing: 2rpx;
			}

			.nums_box {
				width: 40vw;
				justify-content: space-between;
				color: #999999;
				margin: 10rpx 0;
				font-size: 30rpx;

				.bold {
					color: #ffffff;
					margin-right: 5rpx;
				}
			}

			.hint_box {
				margin-top: 20rpx;
				width: 94vw;
				overflow-y: auto;
				justify-content: flex-start;

				.across {
					flex-shrink: 0;
					margin-right: 6vw;

					.img_box {
						width: 75rpx;
						height: 74rpx;
						background-color: #242730;
						border-radius: 10rpx;

						image {
							width: 34rpx;
							height: 32rpx;
							margin-left: 20rpx;
							margin-top: 21rpx;
						}
					}

					.vertical {
						font-size: 24rpx;
						margin-left: 10rpx;
						color: #999;

						.title {
							font-size: 30rpx;
							color: #fff;
						}
					}
				}
			}
		}

		.works {
			margin: 110rpx 0;
			width: 100%;

			.hint {
				font-size: 30rpx;
				color: #fffefe;
			}

			.works_center {

				/* height: calc(100vh - 700rpx); */
				.works_box {
					/* justify-content: space-between; */
					display: flex;
					flex-wrap: wrap;

					.item {
						margin-right: 1.3vw;
						position: relative;

						/* background-color: #FFFFFF; */
						image {
							width: 28vw;
							height: 40vw;
						}

						view {
							position: relative;
						}

						.like_box {
							position: absolute;
							left: 15rpx;
							bottom: 10rpx;
							color: #fff;
							font-size: 24rpx;
							display: flex;
							align-items: center;

							image {
								width: 21rpx;
								height: 18rpx;
								z-index: 2;
								margin-right: 5rpx;
							}
						}
					}
				}


			}

		}

		.popup_box {
			.center {
				height: 276rpx;
				background-color: #f5f5f5;
				display: flex;
				justify-content: space-between;
				flex-direction: column;

				.content {
					height: 120rpx;
					text-align: center;
					line-height: 120rpx;
					font-size: 36rpx;
					border-top-right-radius: 15rpx;
					border-top-left-radius: 15rpx;
					background-color: #fff;
				}

				.cancel {
					line-height: 120rpx;
					height: 120rpx;
					text-align: center;
					font-size: 30rpx;
					background-color: #fff;
				}
			}
		}

		::-webkit-scrollbar {
			display: none
		}
	}
</style>
